<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/reset.css">
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>
    <script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
    <style type="text/css">
        body {
			background-color: #0e92b3;
		}

        .container{
            background-color: white;
            width: 390px;
            height: 490px;
            position: absolute;
            left: 50%;
            margin-left: -195px;
            top: 50%;
            margin-top: -295px;
            border-radius: 10px;
        }

        .nav{
            width: 138px;
            height: 50px;
            margin: 40px auto;
            font-size: 18px;
            padding-top: 15px;
        }

        .nav a{
            width: 50px;
            height: 30px;
            display: inline-block;
            text-align: center;
            color: #757575;
            text-decoration: none;
        }

        .nav i{
            height: 30px;
            padding: 10px;
            display: inline-block;
            text-align: center;
            text-decoration: none;
        }


        .nav .my-login{
            color: #EE8978;
            border-bottom: 2px solid #EE8978;
        }

        /* .nav a:visited{
            color: #757575;
        } */

        .nav a:hover{
            color: #EE8978;
            border-bottom: 2px solid #EE8978;
        }

        /* 图标对齐 覆盖bootstrap里面的top */
        .glyphicon{
            top: 0px;
        }

        .wrapper{
            width: 290px;
            height: 190px;
            margin: 0 auto;
        }

        .my-span{
            display: inline-block;
            margin: 18px auto;
        }

        .my-span .my-b{
            text-decoration: none;
            margin-left: 120px;
            color: #A2A09E;
        }

        .my-span .my-b:hover{
            color: #EE8978;
        }

        .my-button .btn {
            width: 100%;
		    background-color: #0e92b3;
            color: white;
			text-align: center;
			border-radius: 30px;
            font-size: 18px;
			transition: .2s;
		}

		.my-button .btn:hover{
			background-color: #EE8978;
		}

        .wrapper .my-line{
            width: 100%;
            margin-top: 50px;
            height: 24px;
            display: inline-flex;
        }

        .my-line span{
            margin: 0 auto;
        }

        .my-line hr{
            line-height: 24px;
            width: 60px;
            margin: 11px auto;
            border: 0px;
            border-bottom: 1px solid #292D3E;
        }

        .icon-bar{
            margin: 20px auto;
        }

        .icon-bar ul{
            display: flex;
            list-style: none;
        }

        .icon-bar li{
            text-align: center;
            flex-grow: 1;
        }

        .icon-bar span{
            font-size: 30px;
        }

        .icon-bar a{
            color: #757575;
        }

        /* .icon-bar a:link{
            color: #757575;
        } */

        /* .icon-bar a:visited{
            color: #757575;
        } */

        .icon-bar a:hover{
            color: #0e92b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="nav">
            <a class="my-login" href="javascript:;">登录</a>
            <i>·</i>
            <a class="my-regis" href="javascript:;">注册</a>
        </div>
        
        <div class="wrapper">
            <form>
                <div class="input-group">
                    <span class="input-group-addon glyphicon glyphicon-user" id="basic-addon1"></span>
                    <input type="text" class="form-control" placeholder="用户名" aria-describedby="basic-addon1">
                </div>
    
                <div class="input-group">
                    <span class="input-group-addon glyphicon glyphicon-flash" id="basic-addon1"></span>
                    <input type="text" class="form-control" placeholder="密码" aria-describedby="basic-addon1">
                </div>

                <span class="my-span">
                    <input type="checkbox">记住我
                    <a class="my-b" href="javascript:;">登录遇到问题?</a>
                </span>

                <div class="my-button">
                    <div class="btn">登录</div>
                </div>
            </form>
            
            <div class="my-line">
                <hr>
                <span>社交帐号登录</span>
                <hr>
            </div>

            <div class="icon-bar">
                <ul>
                    <li><a href="javascript:;"><span class="glyphicon glyphicon-thumbs-up"></span></a></li>
                    <li><a href="javascript:;"><span class="glyphicon glyphicon-star"></span></a></li>
                    <li><a href="javascript:;"><span class="glyphicon glyphicon-heart"></span></a></li>
                    <li><a href="javascript:;"><span class="glyphicon glyphicon-search"></span></a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="alert alert-warning alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <strong>Warning!</strong> Better check yourself, you're not looking too good.
    </div>

</body>
</html>